<!--
 * @Author: @AT-bear 1509109728@qq.com
 * @Date: 2024-07-07 16:14:17
 * @LastEditors: @AT-bear 1509109728@qq.com
 * @LastEditTime: 2024-07-27 01:39:32
 * @FilePath: \Front-end-Three-Musketeers-Case\case\css渐变(Houdini api)\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变css</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        /* Define custom property */
        @property --direct {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        @property --color{
            syntax: '<color>';
            inherits: false;
            initial-value: #000;
        }

        body {
            height: 100vh;
            width: 100vw;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #card {
            height: 50vh;
            width: 20vw;
            background: linear-gradient(var(--direct), #5ddcff, #3c67e3 43%, #4c00c2);
            position: relative;
            border-radius: 15px;
            animation: spin 5s linear infinite;
           
            
        }

        @keyframes spin {
            to {
                --direct: 360deg;
            }
        }


   

        #card::after {
            content: '';
            position: absolute;
            inset: 12px;
            background: black;
            border-radius: inherit;
    
        }

        #card::before {
            z-index: -1;
        filter: blur(20px);

  
}

    </style>

</head>
<body>

    <div id="card"></div>


   
</body>
</html>
